* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
}

html,body {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    font-size: 16px;
    background-color: #f0f0f0;
    font-weight: 300;
}

#app {
    width: 100%;
    height: 100vh;
    background-color: #0c192c;
    overflow: hidden;
}

.ifu-bubbles {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
}

.ifu-bubbles span {
    width: 1rem;
    height: 1rem;
    background-color: yellow;
    margin: 0 0.2rem;
    border-radius: 50%;
    --primary-color: #4fc3dc;
    box-shadow: 0 0 0.8rem var(--primary-color),
                0 0 1.0rem var(--primary-color),
                0 0 1.2rem var(--primary-color);
    animation: ani calc(120s / var(--i)) linear infinite;
}

.ifu-bubbles span:nth-child(even) {
    --primary-color: #ff2d75;
    background-color: var(--primary-color);
    box-shadow: 0 0 0.8rem var(--primary-color),
                0 0 1.0rem var(--primary-color),
                0 0 1.2rem var(--primary-color);
}

@keyframes ani {
    0% {
        transform: translateY(100vh) scale(0);
    }

    100% {
        transform: translateY(60vh) scale(1);
    }

    100% {
        transform: translateY(-10rem) scale(1);
    }
}